﻿@page "/buttons/radio-button"

@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent

<SampleDescription>
   <p>This sample demonstrates the default functionalities of the RadioButton component. Select the payment mode by clicking the desired RadioButton element.</p>
</SampleDescription>
<ActionDescription>
    <p>The <code>RadioButton</code> is a graphical user interface element that allows to select one option from the choices. It contains checked and unchecked state.</p>
    <p>In this sample, Credit/Debit Card option is checked by default, and it can be achieved by using the <a target=""_blank"" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_Checked">Checked</a> property.</p>
    <p>More information about Blazor RadioButton component can be found in this <a target=""_blank"" href="https://blazor.syncfusion.com/documentation/radio-button/getting-started/"> documentation section</a>.</p>
</ActionDescription>


<div class="control-section">
    <div class="radio-control">
        <h4 class="row">Select a payment method</h4>
        <div class="row">
            <SfRadioButton Label="Credit/Debit Card" Name="payment" Value="credit/debit" Checked="@checkedValue"></SfRadioButton>
        </div>
        <div class="row">
            <SfRadioButton Label="Net Banking" Name="payment" Value="netbanking" Checked="@checkedValue"></SfRadioButton>
        </div>
        <div class="row">
            <SfRadioButton Label="Cash on Delivery" Name="payment" Value="cashondelivery" Checked="@checkedValue"></SfRadioButton>
        </div>
        <div class="row">
            <SfRadioButton Label="Other Wallets" Name="payment" Value="others" Checked="@checkedValue"></SfRadioButton>
        </div>
    </div>
</div>
@code {
    private string checkedValue = "credit/debit";
}
<style>
    .radio-control {
        margin: 5% 0 5% 40%;
    }

    @@media only screen and (max-width: 700px) {
        .radio-control {
            margin-left: 35%;
            margin-top: 8%;
        }

        .control-section {
            min-height: 200px;
        }
    }

    @@media only screen and (max-width: 500px) {
        .radio-control {
            margin-top: 20%;
            margin-left: 21%;
            margin-bottom: 27%;
        }
    }

    .control-section .row {
        margin: 20px 0;
    }

    .e-bigger .radio-control h4 {
        font-size: 20px;
    }
</style>